<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@taglib prefix="kendo" uri="/WEB-INF/taglib.tld"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link href="./kendoui/styles/kendo.common.min.css" rel="stylesheet">
    <link href="./kendoui/styles/kendo.default.min.css" rel="stylesheet">

    <script src="./kendoui/js/jquery.min.js"></script>
    <script src="./kendoui/js/kendo.web.min.js"></script>
    <script src="./kendoui/content/shared/js/console.js"></script>
  </head>
  
  <body>
        <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content">
            <div id="organizer">
                <ul id="panelbar">
                <li class="k-state-active">
                    Programs
                    <ul>
                        <li>Monday</li>
                        <li>Tuesday</li>
                        <li>Wednesday</li>
                        <li>Thursday</li>
                        <li>Friday</li>
                    </ul>
                </li>
                <li>
                    Projects
                    <ul>
                        <li>New Business Plan</li>
                        <li>
                            Sales Forecasts
                            <ul>
                                <li>Q1 Forecast</li>
                                <li>Q2 Forecast</li>
                                <li>Q3 Forecast</li>
                                <li>Q4 Forecast</li>
                            </ul>
                        </li>
                        <li>Sales Reports</li>
                    </ul>

                </li>
                <li>
                    Programs
                    <ul>
                        <li>Monday</li>
                        <li>Tuesday</li>
                        <li>Wednesday</li>
                        <li>Thursday</li>
                        <li>Friday</li>
                    </ul>
                </li>
                <li disabled="disabled">
                    Communication
                </li>
            </ul>
                <div id="bottom"></div>
            </div>
            
            <label for="countries" class="info">Choose shipping countries:</label>
		   
		<%
		String[] countries = {
		    "Albania",
		    "Andorra",
		    "Armenia",
		    "Austria",
		    "Azerbaijan",
		    "Belarus",
		    "Belgium",
		    "Bosnia & Herzegovina",
		    "Bulgaria",
		    "Croatia",
		    "Cyprus",
		    "Czech Republic",
		    "Denmark",
		    "Estonia",
		    "Finland",
		    "France",
		    "Georgia",
		    "Germany",
		    "Greece",
		    "Hungary",
		    "Iceland",
		    "Ireland",
		    "Italy",
		    "Kosovo",
		    "Latvia",
		    "Liechtenstein",
		    "Lithuania",
		    "Luxembourg",
		    "Macedonia",
		    "Malta",
		    "Moldova",
		    "Monaco",
		    "Montenegro",
		    "Netherlands",
		    "Norway",
		    "Poland",
		    "Portugal",
		    "Romania",
		    "Russia",
		    "San Marino",
		    "Serbia",
		    "Slovakia",
		    "Slovenia",
		    "Spain",
		    "Sweden",
		    "Switzerland",
		    "Turkey",
		    "Ukraine",
		    "United Kingdom",
		    "Vatican City"
		};
		%>
		<kendo:autoComplete name="countries" filter="startswith" placeholder="Select country..." separator=", ">
		    <kendo:dataSource data="<%=countries%>">
		    </kendo:dataSource>
		</kendo:autoComplete>
		
            
            <style scoped>
                #organizer {
                    width: 300px;
                    margin: 0 auto;
                    padding: 47px 0 0 0;
                    background: url('../../content/web/panelbar/orgHead.png') transparent no-repeat 0 0;
                }
                #bottom {
                    width: 300px;
                    height: 90px;
                    background: url('../../content/web/panelbar/orgFoot.png') transparent no-repeat 0 0;
                }
                .teamMate:after {
                    content: ".";
                    display: block;
                    height: 0;
                    line-height: 0;
                    clear: both;
                    visibility: hidden;
                }
                .teamMate h2 {
                    font-size: 1.4em;
                    font-weight: normal;
                    padding-top: 20px;
                }
                .teamMate p {
                    margin: 5px 0;
                }
                .teamMate img {
                    float: left;
                    margin: 5px 15px 5px 5px;
                    border: 1px solid #ccc;
                }
            </style>
            <script>
                $(document).ready(function() {
                    $("#panelbar").kendoPanelBar({
                        expandMode: "single"
                    });
                });
            </script>
        </div>
  </body>
</html>
